<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Openstack</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css"/>
  <script src="/static/js/jquery.js"></script>
  <script src="/static/layui/layui.js"></script>
  <style>
     .p{
         font-size: 54px;
         letter-spacing: 40px;
         margin-top: 40px;
         margin-left: 40px;

     }
     .t{
         margin-top: 30px;
         margin-left: 50px;
     }
  </style>
</head>
<body>
<h1 class="p">实例</h1>
<div class="t">
<div class="demoTable">
 <div class="layui-inline">
 <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
 </div>
 <button class="layui-btn layui-btn-primary "data-type="reload">过滤</button>
 <button class="layui-btn" data-type="reload">创建</button>
 <button class="layui-btn layui-btn-danger" data-type="reload">批量删除</button>
</div>
<table class="layui-hide" id="tablea" lay-filter="menu-filter"></table>
</div>
<script type="text/html" id="barDemo">
    <select name='duty_type' id="duty_type" lay-filter="testSelect" lay-search='' style="text-align: center">
        <option value="">编辑</option>
        <option value="">创建快照</option>
        <option value="">迁移实例</option>
        <option value="">软重启实例</option>
        <option value="">硬重启实例</option>
        <option value="">删除实例</option>
    </select>
</script>
</script>
<script>
 layui.use('table', function() {
 var table = layui.table;
 //方法级渲染
 table.render({
  done: function (res, curr, count) {
     $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');
  }
  ,elem: '#tablea'
  ,url:'/wyh0282/livingExampleDatas'
  , cols: [[
  {type:'checkbox',fixed:'left'}
  ,{field:'name', title: '实例名称', align: 'center',width:80}
  ,{field:'description', title: '映像名称', align: 'center',width:100}
  ,{field:'id', title: 'IP地址', align: 'center',width:280}
  ,{field:'dns', title: '大小', align: 'center',width:60}
  ,{field:'enabled', title: '密钥对', align: 'center',width:100}
  ,{field:'enabled', title: '状态', align: 'center',width:60}
  ,{field:'enabled', title: '可用域', align: 'center',width:80}
  ,{field:'enabled', title: '任务', align: 'center',width:60}
  ,{field:'enabled', title: '电源状态', align: 'center',width:80}
  ,{field:'enabled', title: '创建以来的时间', align: 'center',width:120}
  ,{title: 'Actions',align: 'center',width:120,templet:'#barDemo'}
  ]]
  , id: 'testReload'
  , height: 300
  , width: 1200
 });
 $('.layui-btn').click(function () {
  var inputVal = $('.layui-input').val()
  table.reload('testReload', {
  url: 'https://www.easy-mock.com/mock/5c131015dada7b27ac3a5c36/titi/noData'
  // ,methods:"post"
  ,request: {
   pageName: 'page' //页码的参数名称，默认：page
   ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
  }
  ,where: {
   query : inputVal
  }
  ,page: {
   curr: 1
  }
  });
 })
 })

</script>


</body>
</html>